<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-08-20 10:38:02
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-12 14:50:19
 -->
<style lang="less" scoped>
.enterMoneyBox{
  .topInfo{
    width: 100%;
    height: 10.91rem;
    background: url('../../assets/web/backgroundHZ@2x.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 2.7rem;
    .leftBox{
      .line{
        width: 0.52rem;
        height: 0.08rem;
        background: #FD371A;
      }
      .tilte{
        font-weight: bold;
        font-size: 0.8rem;
        color: #ffffff;
        margin-top: 0.51rem;
      }
      .intro{
        width: 5.03rem;
        margin-top: 0.65rem;
        font-size: 0.3rem;
        line-height: 0.6rem;
        color: #ffffff;
      }
      .contactBox{
        margin-top: 1.27rem;
        .btn{
          color: #ffffff;
          width: 2.02rem;
          height: 0.6rem;
          background: #FD371A;
          line-height: 0.6rem;
          text-align: center;
          font-size: 0.18rem;
        }
        .txt{
          font-size: 0.24rem;
          font-weight:400;
          color: #ffffff;
          margin-top: 0.36rem;
        }
      }
    }
    .rightBox{
      margin-left: 1.92rem;
      width:5.01rem;
      height:4.64rem;
      background: #FFFFFF;
      border-radius: 0.1rem;
      box-sizing: border-box;
      position: relative;
      .ctBox{
        padding: 0.76rem 0.5rem 0 0.5rem;
      }
      .lineInput{
        background: #EEEEEE;
        border-radius: 0.1rem;
        display: flex;
        align-items: center;
        padding-left: 0.25rem;
        box-sizing: border-box;
        height: 0.6rem;
        .icon{
          width: 0.28rem;
          height: 0.28rem;
        }
        .nameIcon{
          width: 0.24rem;
        }
      }
      .phoneInput{
        margin-top: 0.32rem;
      }
      .getTip{
        text-align: center;
        color: #000000;
        font-size: 0.18rem;
        margin-top: 0.22rem;
      }
      .getBtn{
        width:4rem;
        height:0.6rem;
        background:rgba(253,55,26,1);
        border-radius:0.03rem;
        font-size: 0.24rem;
        color: #ffffff;
        text-align: center;
        line-height: 0.6rem;
        margin-top: 0.55rem;
        cursor: pointer;
      }
      .scroll{
        height: 0.48rem;
        overflow: hidden;
        background:rgba(255,204,204,0.6);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
  }
}
</style>
<template>
  <div class="enterMoneyBox">
    <div class="topInfo">
      <div class="leftBox">
        <div class="line"></div>
        <p class="tilte">合作共赢</p>
        <p class="intro">
          如果您有闲置资金，通过哪些理财渠道可以获得高收益？如何进行风控？别担心，鼎晟恒基帮您解答！
        </p>
        <div class="contactBox">
          <p class="btn">联系我们</p>
          <p class="txt">欢迎来电咨询，鼎晟恒基期待与您的合作！</p>
        </div>
      </div>
      <div class="rightBox form">
        <div class="ctBox">
          <div class='nameInput lineInput'>
            <img src="../../assets/web/iconWd@2x.png" alt="" class="icon nameIcon">
            <input-verify
              class='realInput'
              inputColor='#EEEEEE'
              inputHeight='0.6rem'
              type="text"
              autocomplete="off"
              ref="nameInput"
              labelFor="nameInput"
              placeholder="请输入姓名"
              :rules='name'
              :doNotShowSuccess='true'
              @change="handleNameChange"
            />
          </div>
          <div class='phoneInput lineInput'>
            <img src="../../assets/web/iconDh@2x.png" alt="" class="icon phoneIcon">
            <input-verify
              class='realInput'
              inputColor='#EEEEEE'
              inputHeight='0.6rem'
              type="tel"
              autocomplete="off"
              ref="phoneInput"
              labelFor="phoneInput"
              placeholder="请输入手机号"
              :rules='phone'
              :doNotShowSuccess='true'
              @change="handlePhoneChange"
            />
          </div>
          <p class="getTip" v-if="isGetTip">您已申请成功，我们将尽快联系您!</p>
          <div class="getBtn" @click="askForMoneyClicked">极速申请</div>
        </div>
        <div class="scroll">
          <UserWrap :size='wrapSize'></UserWrap>
        </div>
       
      </div>
    </div>
  </div>
</template>
<script>
import InputVerify from '../../components/InputVerify'
import Toast from '../../common/toast'
import UserWrap from '../../components/userWrap'
export default {
  name: 'EnterMoney',
  components: {
    InputVerify,
    UserWrap
  },
  data() {
    return {
      isGetTip: false,
      wrapSize: '0.14rem',
      userName: '',
      userPhone: '',
      phone: [
        { required: true, msg: '手机号不能为空' },
        {
          msg: '手机号格式不正确',
          partern: /^1((3\d)|(4(5|7))|([5-9]\d))\d{8}$/
        }
      ],
      name: [
        { required: true, msg: '验证码不能为空' }
      ]
    }
  },
  methods: {
    handlePhoneChange (e) {
      this.userPhone = e
    },
    handleNameChange (e) {
      this.userName = e
    },
    // 申请贷款
    askForMoneyClicked() {
      const situation1st = this.$refs.phoneInput._validate()
      const situation2st = this.$refs.nameInput._validate()
      if (!situation1st || !situation2st) {
        return
      }
      this.$service.post('http://api.dingwealth.com/users/add',{
        userName: this.userName,
        phone: this.userPhone
      }).then(() => {
        this.isGetTip = true
        Toast({
          text: '申请成功，稍后会有工作人员联系您！'
        })
      })
    }
  }
}
</script>